<template>
  <el-space wrap>
    <el-card class="card-item" v-for="item in cardsDataList" :key="item" @click="handleClick(item)" shadow="hover" :style="{ backgroundColor: `var(--el-color-${item.type})`, borderColor: `var(--el-color-${item.type})` }">
      <div class="card-content">
        <div class="tt">{{ item.title }}</div>
        <div class="num">{{ item.value }}</div>
      </div>
    </el-card>
  </el-space>
</template>
<script lang="ts" setup>
import { defineProps } from 'vue'

interface CardItem {
  title: string
  value: string | number
  type?: string
}
defineProps({
  cardsDataList: {
    type: Array as () => CardItem[],
    required: true,
  },
})
const emit = defineEmits(['click'])
const handleClick = (item: CardItem) => {
  emit('click', item)
}
</script>
<style lang="scss" scoped>
.card-item {
  color: #fff;
  width: 180px;
  text-align: left;
  cursor: pointer;
  .card-content {
    display: flex;
    align-items: center;
  }
  .tt {
    font-size: 16px;
    line-height: 1;
    margin-right: 16px;
  }
  .num {
    font-size: 26px;
    line-height: 1;
  }
}
</style>
